<template>
    <div>
        <el-row style="margin-bottom: 9px;margin-left: 15px" :gutter="20">
            <el-col :span="6">
                <el-button size="small" type="primary" @click="dialogVisibleAdd=true">新增</el-button>
            </el-col>
        </el-row>
        <el-card>
            <template>
                <el-table
                        size="mini"
                        :data="linkList"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="linkId"
                            label="id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="linkName"
                            label="友链名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="linkDescription"
                            label="介绍"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="linkA"
                            label="链接"
                            width="180">
                    </el-table-column>
                    <el-table-column label="友链头像">
                        <template slot-scope="scope">
                            <el-image
                                    style="width: 50px; height: 50px"
                                    :src="scope.row.linkAvatar"
                                    :preview-src-list="[scope.row.linkAvatar]"
                            ></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="创建时间">
                    </el-table-column>

                    <el-table-column
                            prop="updateTime"
                            label="修改时间">
                    </el-table-column>


                    <el-table-column label="操作">
                        <template style="display: flex" slot-scope="scope">
                            <el-button
                                    style="margin-right: 5px"
                                    size="mini"
                                    @click="showEdit(scope.row)">编辑
                            </el-button>

                            <!--                                    <el-button>t</el-button>-->
                            <!--                            <el-popconfirm>1</el-popconfirm>-->
                            <!--                            <el-button-->
                            <!--                                    size="mini"-->
                            <!--                                    type="danger"-->
                            <!--                                    @click="handleDelete(scope.$index, scope.row)">删除-->
                            <!--                            </el-button>-->
                            <el-popconfirm
                                    @confirm="deleteLink(scope.row)"
                                    title="这是一段内容确定删除吗？"
                            >

                                <el-button
                                        type="danger"
                                        size="mini"
                                        @click="handleDelete(scope.$index, scope.row)"
                                        slot="reference">删除
                                </el-button>
                            </el-popconfirm>

                            <!--        修改对话框-->
                            <el-form :model="formEdit" :rules="rulesEdit" ref="formEditRef" label-width="100px"
                                     class="demo-ruleForm">

                                <el-dialog
                                        @close="clearEdit(formAddRef)"
                                        title="修改分类"
                                        :visible.sync="dialogVisibleEdit"
                                        width="60%"
                                >
                                    <el-form-item label="友链名称" prop="linkName">
                                        <el-input v-model="formEdit.linkName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="友链介绍" prop="linkDescription">
                                        <el-input v-model="formEdit.linkDescription"></el-input>
                                    </el-form-item>
                                    <el-form-item label="友链链接" prop="linkA">
                                        <el-input v-model="formEdit.linkA"></el-input>
                                    </el-form-item>
                                    <!--                                    <span>{{// formEdit.typeImg}}</span>-->
                                    <!--                                                                        <img style="" :src="formEdit.typeImg" alt="">-->
                                    <el-image :src="formEdit.linkAvatar"></el-image>
                                    <el-upload
                                            class="upload-demo"
                                            action="http://localhost:8888/admin/type/upload"

                                            multiple
                                            :limit="3"
                                            :on-success="uploadEdit"
                                    >
                                        <el-button size="small" type="primary">点击上传</el-button>
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                    </el-upload>

                                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleEdit = false">取 消</el-button>
    <el-button type="primary" @click="submitEdit(scope.row)">确 定</el-button>
  </span>
                                </el-dialog>
                            </el-form>

                            <!--        修改对话框结束-->
                        </template>
                    </el-table-column>
                </el-table>
            </template>

        </el-card>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[1, 5, 10, 20]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--        新增对话框开始-->
        <el-form :model="formAdd" :rules="rulesAdd" ref="formAddRef" label-width="100px" class="demo-ruleForm">

            <el-dialog
                    @close="clearAdd(formAddRef)"
                    title="新增友链"
                    :visible.sync="dialogVisibleAdd"
                    width="30%"
            >
                <el-form-item label="友链名称" prop="linkName">
                    <el-input v-model="formAdd.linkName"></el-input>
                </el-form-item>
                <el-form-item label="友链介绍" prop="linkDescription">
                    <el-input v-model="formAdd.linkDescription"></el-input>
                </el-form-item>
                <el-form-item label="友链链接" prop="linkA">
                    <el-input v-model="formAdd.linkA"></el-input>
                </el-form-item>
                <el-upload
                        class="upload-demo"
                        action="http://localhost:8888/admin/type/upload"

                        multiple
                        :limit="3"
                        :on-success="upload"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>

                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleAdd = false">取 消</el-button>
    <el-button type="primary" @click="add('formAddRef')">确 定</el-button>
  </span>
            </el-dialog>
        </el-form>

        <!--        新增对话框结束-->

    </div>
</template>

<script>
    import {formatDate} from '@/assets/js/Time';
    // import Global from "../../assets/js/Global";
    import Global from "../../../public/static/Global";

    export default {
        data() {
            return {
                linkList: [
                    {
                        name: "xxxxx",
                        type: "222"
                    }
                ],  // 分类数据
                dialogVisibleAdd: false,
                dialogVisibleEdit: false,
                formAdd: {  // 添加对话框
                    linkName: "",
                    linkAvatar: "",
                    linkDescription: "",
                    linkA: ""

                },
                formEdit: {  // 修改对话框
                    linkName: "",
                    linkAvatar: "",
                    linkDescription: "",
                    linkA: ""

                },
                srcList: [],  // 放大

                currentPage4: 1,  // 当前页
                size: 5, // 每页的个数
                fileList:[],
                total: 100,// 总条数
                rulesAdd: {
                    linkName: [
                        {required: true, message: '请输入友链名', trigger: 'blur'},
                    ], linkDescription: [
                        {required: true, message: '请输入介绍', trigger: 'blur'},
                    ], linkA: [
                        {required: true, message: '请输入链接', trigger: 'blur'},
                    ],
                },
                rulesEdit: {
                    linkName: [
                        {required: true, message: '请输入友链名', trigger: 'blur'},
                    ], linkDescription: [
                        {required: true, message: '请输入介绍', trigger: 'blur'},
                    ], linkA: [
                        {required: true, message: '请输入链接', trigger: 'blur'},
                    ],
                }
            }
        },
        created() {
            // console.log('222')
            this.getLinkInfo();
        },
        methods: {
            cover(){

            },
            showEdit(row) {  // 展开修改对话框
                this.dialogVisibleEdit = true;
                this.formEdit.linkName = row.linkName;
                this.formEdit.linkDescription = row.linkDescription
                this.formEdit.linkAvatar = row.linkAvatar;
                // this.formEdit.create
                this.formEdit.linkA = row.linkA
                this.formEdit.linkId = row.linkId;
                // this.$http.put('')
            },
            async getLinkInfo() {  // 得到分类的信息
                const {data: res} = await this.$http.get('/admin/link?index=' + this.currentPage4 + '&size=' + this.size,
                )
                // console.log(res);
                // console.log("1111");
                for (let i = 0; i < res.data.records.length; i++) {
                    const time = res.data.records[i].createTime; // 获取的时间戳
                    let date = new Date(time)
                    const timeformat = formatDate(date, 'yyyy-MM-dd hh:mm') // 转成想要的格式
                    res.data.records[i].createTime = timeformat; // 重新赋值
                    res.data.records[i].updateTime = timeformat; // 重新赋值
                    // 图片路径的拼接
                    res.data.records[i].linkAvatar = Global.baseUrl + res.data.records[i].linkAvatar;
                    // console.log(res.data[i].createTime);
                }
                console.log(res);
                this.total = res.data.total;
                // console.log(res.data[7].typeImg);
                this.linkList = res.data.records;
            },
            upload(response, file, fileList) { // 分类上传成功后的钩子
                console.log(response)
                console.log(file)
                this.formAdd.linkAvatar = response.data;  // 上传成功后的名字
                console.log(fileList);
            },
            uploadEdit(respose, file, fileList) {  // 编辑分类上传成功的钩子
                this.formEdit.linkAvatar = respose.data;  // 上传成功后的名字
                console.log(respose);
            },
            add(formAddRef) {  // 添加对话框里的确定
                // console.log(formAddRef);
                this.$refs[formAddRef].validate(async (valid) => { // 前端校验
                        if (valid) {
                            const {data: res} = await this.$http.post('/admin/link', this.formAdd)
                            console.log(res);
                            if (res.meta.status === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                })
                                this.dialogVisibleAdd = false;
                                this.getLinkInfo(); // 重新刷新数据

                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.meta.msg
                                })
                                this.dialogVisibleAdd = false;
                            }

                        } else {
                            this.$message({
                                type: 'error',
                                message: '请检查！'
                            })
                            return false;
                        }
                    }
                );
                // this.dialogVisibleAdd = true;
                this.$refs[formAddRef].resetFields();

            },
            clearAdd(formAddRef) {  // 清除添加对话框的校验效果/上次表单信息
                // console.log(formAddRef)
                // this.$nextTick(() => {
                //     this.$refs[formAddRef].resetFields();
                //
                // })
                this.formAdd = {};
                // console.log('22221321')
            },
            async deleteLink(row) {
                // console.log(row);
                // console.log(row.linkId)
                const {data: res} = await this.$http.delete('/admin/link/' + row.linkId)
                // console.log(res);
                if (res.meta.status === 200) {
                    this.$message.success('删除成功！')
                    this.getLinkInfo();
                } else {
                    this.$message.error(res.data.meta.msg);
                }
            },
            async submitEdit() {  // 修改对话框确定按钮
                // console.log(row);
                const {data: res} = await this.$http.put('/admin/link', this.formEdit);
                console.log(res.meta.status);
                if (res.meta.status === 200) {
                    this.$message.success("修改成功");
                    this.getLinkInfo();
                } else {
                    this.$message.error(res.meta.msg);
                }
                this.dialogVisibleEdit = false;
            },
            handleSizeChange(size) { // 每页的个数
                this.size = size;
                this.getLinkInfo()

            },
            handleCurrentChange(index) {
                this.currentPage4 = index;
                this.getLinkInfo()

            } // 当前第几页
        }
    }
</script>


<style scoped>

</style>